
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                <span id="opt_span"></span>
                <input id="opt_input" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="send1()">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                <div>
                <span>新的密码:</span>
                    <input id="opt_input_password" type="text">
                </div>
                <div style="padding-top: 10px">
                    <span>确认密码:</span>
                    <input id="opt_input_rePassword" type="text">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="send()">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    修改错误
                </h4>
                <div class="modal-body">
                    <p2 id="opt_eeroe2" type="text"></p2>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<div class="container">
    <div class="row">
        <div class="col-md-12" style="padding:2em 0;">
            <div class="page-header">
                <h1>用户基本信息
                    <small>
                        点击
                        <span class="glyphicon glyphicon-pencil"></span>
                        按钮可以将该表格行编辑</small>
                </h1>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="mytable">
                    <thead>
                    <tr>
                        <td>用户名</td>
                        <td>
                            <p5></p5>
                        </td>
                        <td class="text-center" >
                            <span onclick="edit('username')" class="glyphicon glyphicon-pencil "></span>
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>email</td>
                        <td>
                            <p5></p5>
                        </td>
                        <td class="text-center">
                            <span onclick="edit('email')" class="glyphicon glyphicon-pencil"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>修改密码</td>
                        <td></td>
                        <td class="text-center">
                            <span class="glyphicon glyphicon-pencil" onclick="edit('password')"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var username=$("#b_username").text();
    
    $(function () {
        getObject();
    });
    function getObject() {
        var tr=$("table tr p5");
        tr.eq(0).text(username);
        $.ajax({
            type:"GET",
            dataType:"json",
            url:"/findUserByName",
            data:{"username":username},
            success:function (data) {
                tr.eq(1).text(data.data.email);
            }
        })
    }
    function edit(option) {
        console.log(option);
        if(option=='username'){
            $("#myModalLabel").text("用户名");
            $("#opt_span").prop("opt_typ","updateUsername");
            $("#opt_span").prop("opt_param","newName");
            $("#opt_span").text("新的用户名：");
            $("#myModal").modal("show");
        }
        else if(option=="password"){
            $("#myModalLabel1").text("修改密码");
            $("#myModal1").modal("show");
        }
        if(option=="email"){
            $("#myModalLabel").text("邮箱");
            $("#opt_span").prop("opt_typ","updateEmail");
            $("#opt_span").prop("opt_param","email");
            $("#opt_span").text("新的邮箱：");
            $("#myModal").modal("show");
        }
    }
    function isEmail(param,value) {
        if(param=="email"){
            var reg =/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(value  )){
                $("#opt_eeroe2").text("邮箱格式不正确")
                $("#myModal2").modal("show");
                return 0;
            }
            return 1;
        }
    }
    function send() {
        var password=$("#opt_input_password").val();
        var rePassword=$("#opt_input_rePassword").val();
        console.log(password+"  "+rePassword);
        if(password==""||rePassword==""){
            $("#opt_eeroe2").text("密码不能为空")
            $("#myModal2").modal("show");
            return;
        }
        if(password!=rePassword){
            $("#opt_eeroe2").text("两次密码不一致")
            $("#myModal2").modal("show");
            return;
        }else{
            $.ajax({
                type:"GET",
                dataType:"JSON",
                url:"/updatePsw",
                data:{"password":password,"name":username},
                success:function (data) {
                    location.href="/login/logout";
                }
            })
        }
    }
    
    function send1() {
        var option =$("#opt_span").prop("opt_typ");
        var param =$("#opt_span").prop("opt_param");
        var value=$("#opt_input").val();
        var flg = isEmail(param,value);
        if(flg==0){
            return;
        }
        var json ={"username":username};
        json[param]=value;
        $.ajax({
            type:"GET",
            dataType:"json",
            url:"/"+option,
            data:json,
            success:function (data) {
                if(data.status==1){
                    location.href="/login/logout";
                }else if (data.status==3){
                    $("#myModal").modal("hide");
                    getObject();
                }else{
                    $("#opt_eeroe2").text(data.message)
                    $("#myModal2").modal("show");
                }
            }
        })
    }
</script>
